<div class="content">
    <div id="selectTitle" style="height:55px;">
        <div id="selectTitle1" style="width:33%; display:inline-block; float:left; text-align:center;" >
            <span class="biui-add-btn" data-name="selectTab1" next-name="" onMouseOver="divshow(this,'mydiv1')" onMouseOut="divhide(this,'mydiv1')"><i class="icon"></i>选择筛选条件</span>
        </div>
        <div id="selectTitle2" style="width:33%; display:inline-block; float:left; text-align:center;">
            <span class="biui-add-btn" data-name="selectTab2" next-name="" onMouseOver="divshow(this,'mydiv1')" onMouseOut="divhide(this,'mydiv1')"><i class="icon"></i>选择查询维度</span>
        </div>
        <div id="selectTitle3" style="width:33%; display:inline-block; float:left; text-align:center;">
            <span class="biui-add-btn" data-name="selectTab3" next-name="" onMouseOver="divshow(this,'mydiv1')" onMouseOut="divhide(this,'mydiv1')"><i class="icon"></i>选择查询指标</span>
        </div>
    </div> 
    <div id="mydiv1" style="position:absolute;display:none;font-size:10px;;background-color: #F4F4F4;border:1px solid #e6e6e6;border-radius: 5px; z-index:9;"><!--background:silver;border:1px solid silver;-->
    </div>
    <div id="selectBox">
        <div id="selectTab1" class="biui-select-box" style="display:none" >
            <i class="arrow" style="left:16%">▲</i>
            <table class="biui-form">
                <tbody>
                    <tr>
                        <td class="topic"></td>
                        <td class="context">
                        #if($timeLine)
                            <label class="text-head">时间:</label>
                            <input type="hidden" name="dateselect" id="dateselect" value="#!{dateselect}" /> 
                            <div class="biui-inline-block">
                                <span class="biui-checkbox-btn" name="selectdate" id="datesel0" onclick="selectDate('-1')">昨天</span>
                            </div>
                            <div class="biui-inline-block">
                                <span class="biui-checkbox-btn" name="selectdate" id="datesel1" onclick="selectDate('-7')">近7天</span>
                            </div>
                            <div class="biui-inline-block">
                                <span class="biui-checkbox-btn" name="selectdate" id="datesel2" onclick="selectDate('-1m')">近1月</span>
                            </div>
                            <div class="biui-inline-block">
                                <input  type="text" id="startDate" relname="起始日期" name="startDate" style="width:150px;height:22px" class="Wdate form-control" value="#!{startDate}" onclick="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd'})"/>
                            </div>
                            <div class="biui-inline-block">--</div>
                            <div class="biui-inline-block">
                                <input  type="text" id="endDate" name="endDate" relname="截止日期" style="width:150px;height:22px" class="Wdate form-control" value="#!{endDate}" onclick="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd'})"/>
                            </div>
                            <div class="biui-inline-block">
                                <span style="color:red;font-size: 14px;">
                                    #if($isMonthSearch == 1)
                                        (跨月查询较慢,如遇504超时请缩小日期段分割查询)
                                    #elseif($isMonthSearch == 0)
                                        (该报表不支持跨月查询)
                                    #end
                                </span>
                            </div>
                        #end
                       

                        #if($timePoint)
                            <div class="col-md-2">
                              <input  type="text" id="searchDate" name="searchDate" style="width:150px" class="Wdate form-control" value="#!{searchDate}" onclick="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd'})"/>
                            </div>
                        #end
                        </td>
                    </tr>


                    #if($citySelect)
                        $!{citySelectValue}
                    #end
                    
                    #if($cateSelect)
                        $!{cateSelectValue}
                    #end
                    
                    #if($dpValues)
                        $!{dpValues}
                    #end
                    
                    #if($infoSourceSelect)
                        $!{infoSourceSelectValue}
                    #end
                    
                    #if($flowSourceSelectValue)
                        $!{flowSourceSelectValue}
                    #end
                    
                    #if($jxedtFlowSourceSelectValue)
                        $!{jxedtFlowSourceSelectValue}
                    #end
                    
                    #if($chrFlowSourceSelectValue)
                        $!{chrFlowSourceSelectValue}
                    #end
                    
                    #if($chrIndustrySelectValue)
                        $!{chrIndustrySelectValue}
                    #end
                    
                    #if($chrJobSelectValue)
                        $!{chrJobSelectValue}
                    #end
                    #if($searchList)
                     <tr>
                        <td class="topic"></td>
                        <td class="context">
                        #foreach($search in $searchList)
                            #if($velocityCount%3 == 1)
                                <div class="form-group">
                            #end
                            
                            #if(${search.searchTypeId} == 5 || ${search.searchTypeId} == 6)
                                    <label class="text-head">${search.scname}:</label>
                                    <div class="text-body">
                                      <input type="text" relname="${search.scname}" class="form-control" style="width:132px" id="${search.sename}" name="${search.sename}" value="#!{${search.sename}}"/>
                                    </div>
                            #elseif(${search.searchTypeId} == 7)
                                    <label class="text-head">${search.scname}:</label>
                                    <div class="text-body">
                                        <input type="hidden" name="${search.sename}" id="${search.sename}" value="#!{${search.sename}}" /> 
                                        <select compType='normal' relname="${search.scname}" class="selectpicker show-tick form-control" multiple data-live-search="true"  name="${search.sename}_multi" id="${search.sename}_multi" >
                                            #set($values = $search.detailValue.split(';'))
                                            #foreach($value in ${values})
                                                <option value="$value.split(':')[0]" title="$value.split(':')[1]" &^if (#!${search.sename}.contains("'$value.split(':')[0]'")) selected="selected" &^end >$value.split(':')[1]</option>
                                            #end
                                        </select>
                                    </div>
                            #end
                            
                            #if($velocityCount%3 == 0 || $velocityCount == $searchList.size())
                                </div>
                            #end
                        #end
                        </td>
                    </tr>

                    #end


                </tbody>
            </table>
        </div>
         
        <div id="selectTab2" class="biui-select-box" style="display:none">
            <i class="arrow" style="left:49%">▲</i>
            #if($groupBy)
                #set($values = $groupBy.detailValue.split(';'))
            <table class="biui-form" id="groupByDiv">
                <tbody>
                    <input type="hidden" id="groupBy" name="groupBy" title="" value="#!{groupBy}"/>
                    <tr> 
                        <td class="context">
                                <div class="biui-inline-block">
                                    <label class="checkbox-inline">  
                                    <input type="checkbox" onclick='changeGroupTab(this)' typename="allsel" fieldName="all" id='总计' name="selectgb$velocityCount"/> 
                                    总计
                                    </label>   
                                </div>
                        </td>
                    </tr>
                     <tr>
                        <td class="context">
                            #foreach($value in $values)
                                #set($ename = $value.split(':')[0])
                                #set($cname = $value.split(':')[1])
                                <div class="biui-inline-block">
                                    <label class="checkbox-inline">  
                                    <input type="checkbox" onclick='changeGroupTab(this)' typename="grosel" fieldName="$ename" id='$cname' name="selectgb$velocityCount"/> 
                                        $cname
                                    </label>   
                                </div>
                            #end
                        </td>
                    </tr>
                    <tr>
                        <td class="context">
                          <span style="font-family: '微软雅黑';font-weight: 400; font-style: normal; font-size: 15px;">显示维度将按以下顺序排序：</span>
                          <button type="button" class="btn btn-warning btn-xs" style="margin-left: 50px;" onclick="cleargrpall()">
                            重新选择
                           </button>
                       </td>
                    </tr>
                    <tr>
                        <td class="context">
                              <div id="groupview">
                                <span id="tabs"></span>
                              </div> 
                         </td>
                    </tr>
                    
                        </br>
                </tbody>
            </table>
            
            <span style="padding-top:10px;font-family: '微软雅黑';" class="title-text-font">请选择维度<span style="color:red"> &nbsp;(TIPS：1.总计维度与其他维度互斥；2.除总计最多可选5个维度；3.不含日期维度时可查看所选日期范围内的日均数据。)</span></span>
            
            
            #end
        </div>

        <div id="selectTab3" class="biui-select-box" style="display:none">
            <i class="arrow" style="left:82%">▲</i>
            #if($tabNameList)
            <div id='ui-tab' class="biui-target-tab" data-options="tools:'#tab-tools'">
                <div class="tab-header" >
                    #foreach($tabType in $tabNameList)
                        <div class="tab-option" data-tab="$tabType">$tabType</div>
                    #end
                </div>

                #foreach($tabType in $tabNameList)
                    #set($colsList = $tabMap.get($tabType))
                    <div class="tab-context" name="tab" data-title="$tabType" style="display:none">
                        <div class="form-group" style="font-size: 13px">
                            <label style="color:red" class="col-md-2">请选择查询指标:</label>
                            <div class="col-md-10">
                                <label class="checkbox-inline">
                                    <input type="checkbox" style="margin-top:8px" name="selectAllCol" id="selectAllCol" value="selectAll" 
                                    onclick="selectAllCols(this)" />
                                    全选/取消:
                                </label>
                            </div>
                        </div>

                        #foreach($col in $colsList)
                            #if($velocityCount %8 == 1)
                            <div class="form-group" style="font-size: 13px">
                                <div class="col-md-10">
                            #end 
                                    <label class="checkbox-inline">
                                    <input type="checkbox" style="margin-top:8px" name="selectCol" checkname="${col.cname}" id="selectCol" value="${col.ename}" 
                                    &^if(#!{tools.judgeShow('${col.ename}',#!{colsSelect})}== "true" || #!{colsSelect}== "selectAll") 
                                        checked 
                                    &^end   
                                    onclick="addSelect(this)"/>
                                    ${col.cname}
                                    </label>
                            
                            #if($velocityCount % 8 == 0 || $velocityCount == $colsList.size())
                                </div>
                            </div>
                            #end
                         #end
                    </div>
                #end
            </div>
            #end
        </div>

    </div>    
</div>

<div class="portlet-content">   
    <div class="foot-btn"  >
        <button type="button" name="fornext" id="fornext" beforeitem="" thisitem=""  class="submit-btn" style="display:none">下一项</button>
    </div>
    <div class="foot-btn" id="forsearch" style="display:none">
        <button type="button" name="tosearch" id="tosearch"  class="submit-btn">查  询</button>
    </div>
</div> <!-- /.portlet-content -->
<script src="/javascript/theme/libs/bootstrap-selects.js"></script>
<!-- <script type="text/javascript" src="/javascript/theme/libs/jquery-easyui-1.4/jquery.easyui.min.js"></script> -->
<script src="/javascript/theme/libs/jquery-ui-1.9.2.custom.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
    $('#selectTitle .biui-add-btn').on('click',function(){
        $('#selectBox .biui-select-box').hide();
        if($(this).hasClass('active'))
        {
            $('#selectTitle .biui-add-btn').removeClass('active');
            $('#fornext').hide();
            $('#forsearch').show();
        }else{
            $('#selectTitle .biui-add-btn').removeClass('active');
            $(this).addClass('active');
            $('#'+$(this).attr('data-name')).show();
            if($(this).attr('next-name')!=''&&($(this).attr('hasquery')==undefined))
            {
                $('#forsearch').hide();
                $('#fornext').show();
                $('#fornext').attr('thisitem',$(this).attr('next-name'));
                $('#fornext').attr('beforeitem',$(this).attr('data-name'));
            }else
            {
                $('#fornext').hide();
                $('#forsearch').show();
            }
      }
    });
    $('#fornext').on('click',function(){
        var dataname=$(this).attr('thisitem');
        var beforename=$(this).attr('beforeitem');
        var itemindex=parseInt(dataname.substring(dataname.length-1,dataname.length))-1;
        var beforeindex=parseInt(beforename.substring(beforename.length-1,beforename.length))-1;
        if(beforeindex==0)
        {
           if(subCheck())
            {
                  $('#selectTitle .biui-add-btn')[beforeindex].innerHTML=$('#selectTitle .biui-add-btn')[beforeindex].innerHTML.replace("选择","编辑");
                  $('#selectTitle .biui-add-btn')[beforeindex].setAttribute("style","color:#258ae1");
                  $($('#selectTitle .biui-add-btn')[itemindex]).click();
            }else
            {
                 $('#selectTitle .biui-add-btn')[beforeindex].setAttribute("style","");
                 $('#selectTitle .biui-add-btn')[beforeindex].innerHTML=$('#selectTitle .biui-add-btn')[beforeindex].innerHTML.replace("编辑","选择");
            }
        }else if(beforeindex==1){
             if(checkgroupby())
            {
                  $('#selectTitle .biui-add-btn')[beforeindex].innerHTML=$('#selectTitle .biui-add-btn')[beforeindex].innerHTML.replace("选择","编辑");
                  $('#selectTitle .biui-add-btn')[beforeindex].setAttribute("style","color:#258ae1");
                  $($('#selectTitle .biui-add-btn')[itemindex]).click();
            }else
            {
                 $('#selectTitle .biui-add-btn')[beforeindex].setAttribute("style","");
                 $('#selectTitle .biui-add-btn')[beforeindex].innerHTML=$('#selectTitle .biui-add-btn')[beforeindex].innerHTML.replace("编辑","选择");
            }
        }
        
    });
    $('.biui-checkbox-btn[name="selectdate"]').on('click',function(){
        $('.biui-checkbox-btn[name="selectdate"]').removeClass('active');
        $(this).addClass('active');
        $('#dateselect').val($(this).attr('id'));
    });

    $('#ui-tab .tab-option').on('click',function(){
        $('#ui-tab .tab-context[data-title="'+$('.tab-option.active').attr('data-tab')+'"]').hide();
        $('.tab-option.active').removeClass('active');
        $('#ui-tab .tab-context[data-title="'+$(this).attr('data-tab')+'"]').show();
        $(this).addClass('active');
        
    });
    $($('#ui-tab .tab-option')[0]).click();
    if($('#selectTab2').find(".biui-form").length!=0)
        {
           $('#selectTitle2').show();
           $('#selectTitle1 .biui-add-btn').attr('next-name',"selectTitle2");
        }else{
           $('#selectTitle2').hide();
        }
    if($('#selectTab3').find(".tab-header").length!=0)
        {
           $('#selectTitle3').show();
           if($('#selectTab2').find(".biui-form").length!=0)
           {
            $('#selectTitle2 .biui-add-btn').attr('next-name',"selectTitle3");
           }else
           {
            $('#selectTitle1 .biui-add-btn').attr('next-name',"selectTitle3");
           }
        }else{
           $('#selectTitle3').hide();
        }

     if($('#startDate').val()=="")
     {
        $($('#selectTitle .biui-add-btn')[0]).click();
     }
     

});
function rescheckgroup(){
    var ttt=$('#selectTitle').find('.biui-add-btn');
    for(var i=0;i<ttt.length;i++)
    {
      ttt[i].innerHTML=ttt[i].innerHTML.replace("选择","编辑");
      ttt[i].setAttribute("style","color:#258ae1");
      ttt[i].setAttribute("hasquery","true");
    }
    if(document.getElementById("dateselect")!=undefined)
    {
        if($("#dateselect").val()!="")
        {
            $("#"+$("#dateselect").val()).addClass('active');
        }
    }
 if(document.getElementById("groupBy")==undefined)
   {
            return;
    }
    var groupBy = $("#groupBy").val();
    $("#groupBy").val("");
    document.getElementById("tabs").innerHTML=""; 
    if(groupBy !="")
    {
        var fs = groupBy.split(",");
        for(var i=0;i<fs.length;i++){
            var f = fs[i];
            var fieldname = f.split(":")[1];
            $("#groupBy").parent().find("[fieldName='"+fieldname+"']").prop('checked',true);
            addGroupTab($("#groupBy").parent().find("[fieldName='"+fieldname+"']"));
        }
    }else{
        $("#总计").prop('checked',true);
        addGroupTab($("#总计"));

    }
}
function cleargrpall(){
    $(groupByDiv).find(":checkbox").each(function(){
                        if($(this).is(':checked')==true)
                        {
                            $(this).prop('checked',false);
                            delGroupTab($(this));
                        }
                        
                        
                    });
}
function changeGroupTab(tabname){
         if($(tabname).is(':checked')==true)
         {
               addGroupTab(tabname);
         }else if($(tabname).is(':checked')==false)
         {
               delGroupTab(tabname);
         }
}
function addGroupTab(tabname){
            if(document.getElementById('tabs').children.length<5)
           { 
                var tabid=$(tabname).attr('id');
                var t=$(tabname);
                var para=document.createElement("li");
                para.setAttribute("rename",tabid);
                para.setAttribute("class","btn btn-info btn-sm");
                para.setAttribute("style","margin-left:10px");
                para.innerHTML =tabid+'<i class="glyphicon glyphicon-ok"></i>';
                document.getElementById('tabs').appendChild(para);
                var groups=$('#groupBy').val();
                groups +=$(tabname).attr('fieldName')+",";
                $('#groupBy').val(groups);
                if(tabid!="总计")
                {
                    $(groupByDiv).find(":checkbox[typename='allsel']")[0].disabled=true;
                      
                }else{
                    $(groupByDiv).find(":checkbox[typename='grosel']").each(function(){
                        $(this).attr("disabled",true);
                    });
                }
                /*if(tabid!="总计")
                {
                    document.getElementById(tabid).style.display='none';
                    document.getElementById("总计").style.display='none';
                    var flaggroup=true;
                      $.each($('#dropdownforgroup').find("li"), function(){
                        if($(this).attr("style")==undefined)
                        {
                            flaggroup=false;
                        }
                      });
                      if(flaggroup)
                      {
                        document.getElementById("dropdownforgroup").style.display='none';
                      }
                }else{
                    document.getElementById("dropdownforgroup").style.display='none';
                }*/
            }else
              {
                  $(tabname).prop('checked',false);
                  alert("维度最多只允许选五个！");
              } 
            }
function delGroupTab(tabname){
   var tabid=$(tabname).attr('id');
   var t=$(tabname);
   var groups=$('#groupBy').val();
   if(groups.indexOf($('#'+tabid).attr('fieldName')+",")!=-1)
    {
        groups =groups.replace($('#'+tabid).attr('fieldName')+",","");
        $('#groupBy').val(groups);
    }
   $('#tabs').find('li[rename="'+tabid+'"]').remove();
   if(tabid!="总计")
    {    var falg=true;
         $(groupByDiv).find(":checkbox[typename='grosel']").each(function(){
                        if($(this).is(':checked')){
                            falg=false;
                        }
            });    
         if(falg==true)
         {
         $(groupByDiv).find(":checkbox[typename='allsel']")[0].disabled=false;
         }
    }else{
        $(groupByDiv).find(":checkbox[typename='grosel']").each(function(){
                        $(this).attr("disabled",false);
                    });
    }
}
function addrows(obj){
   document.getElementById("mydiv1").innerHTML=""; 
   var tttdiv=obj;
   if($(tttdiv).attr("data-name")=="selectTab1")
   {
       $.each($("#"+$(tttdiv).attr("data-name")+"").find('input:text'), function() {
                 if(this.value!=""&&($(this).attr("relname")!=undefined))
                 {
                    var temppara=document.createElement("li");
                    temppara.innerHTML=$(this).attr("relname")+":"+this.value;
                    document.getElementById("mydiv1").appendChild(temppara);
                 }
            });
       $.each($("#"+$(tttdiv).attr("data-name")+"").find('select'), function() {

                 if(this.value!=""&&($(this).attr("relname")!=undefined))
                 {
                    var strtemp=$("button[data-id='"+$(this).attr("id")+"']").attr('title');
                     if(strtemp.indexOf("中小城市")!=-1)
                    {
                        for(var i=0;i<zhongxiao.length;i++)
                        {
                            if(strtemp.indexOf(zhongxiao[i])!=-1)
                            {
                               strtemp=strtemp.replace(", "+zhongxiao[i],"");
                            }

                        }
                        if(strtemp.indexOf("澳门......")!=-1)
                        {
                            strtemp=strtemp.replace(", 澳门......","");
                        }
                    }
                     if(strtemp.indexOf("直营城市")!=-1)
                    {
                        for(var i=0;i<zhiying.length;i++)
                        {
                            if(strtemp.indexOf(zhiying[i])!=-1)
                            {
                               strtemp=strtemp.replace(", "+zhiying[i],"");
                            }
                        }
                    }
                     if(strtemp.indexOf(", 澳门, 香港, 新加坡")!=-1)
                        {
                           strtemp=strtemp.replace(", 澳门, 香港, 新加坡","");
                        } 
                    var temppara=document.createElement("li");
                    temppara.innerHTML=$(this).attr("relname")+":"+strtemp;
                    document.getElementById("mydiv1").appendChild(temppara);
                 }
       });
   }else if($(tttdiv).attr("data-name")=="selectTab2")
   {
        if($("#groupBy").val()!="")
        {
            var grouptext="已选择维度：";
             $.each($("#tabs").find('li'), function() {
                grouptext +=$(this).attr("rename")+" ";
             });
             var temppara=document.createElement("li");
             temppara.innerHTML=grouptext;
             document.getElementById("mydiv1").appendChild(temppara);
        }
   }else if($(tttdiv).attr("data-name")=="selectTab3")
   {
     var selecttabtext="";
     $.each($("#selectTab3").find('input:checkbox'), function() {
             if(this.checked&&($(this).attr("checkname")!=undefined))
              { 
                if(selecttabtext=="")
                {
                    selecttabtext="已选择的指标："
                }
                selecttabtext +=$(this).attr("checkname")+" ";
              } 
     });
     var temppara=document.createElement("li");
     temppara.innerHTML=selecttabtext;
     document.getElementById("mydiv1").appendChild(temppara);
   }
}
function divshow(obj,id) { 
    addrows(obj);
    var objDiv = $("#"+id+""); 
    $(objDiv).css("display","block"); 
    $(objDiv).css("left", event.clientX); 
    $(objDiv).css("top", event.clientY + 10); 
} 
function divhide(obj,id) { 
    var objDiv = $("#"+id+""); 
    $(objDiv).css("display", "none"); 
}

</script>